@layout("/common/_curd/_container.html"){
	<link rel="stylesheet" href="${basePath}/static/style/css/main.css" />
    <style rel="stylesheet" type="text/css">
        .uploadWrapper{
            width: 100%;
            padding: 10px;
            border: 1px #dadada solid;
        }
        .uploadWrapper .selectFile,
        .uploadWrapper .fileItem .delBtn{
            padding: 5px 15px 5px 15px;
            border: 1px #c4c4c6 solid;
            border-radius: 5px;
            margin-right: 15px;
            background-color: #fff;
            cursor: pointer;
        }
        .uploadWrapper .fileList{
            display: none;
        }
        .uploadWrapper .fileItem{
            width: 100%;
            display: flex;
            padding: 5px 0;
            text-align: center;
            border-bottom: 1px #dadada solid;
        }
        .uploadWrapper .fileItem span:not(.delBtn){
            flex: 1;
            margin-right: 15px;
        }
        .uploadWrapper .fileItem .delBtn{
            padding: 2px 15px 2px 15px;
            background-color: #fff;
            cursor: pointer;
            font-size: 12px;
        }
        .uploadWrapper .fileItem span.status{
            /*color: #449d44;*/
            font-size: 12px;
        }
        .uploadWrapper .selectFile:hover,
        .uploadWrapper .fileItem .delBtn:hover{
            background-color: #eee;
        }


        .checkStyle{
            display: inline-block;
            margin: 5px 20px 0 0;
            cursor: pointer;
        }
        .checkStyle .checkSpan{
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            margin-right: 10px;
            margin-top: -1px;
            line-height: 1;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid rgba(0,0,0,0.15);
        }
        .checkStyle .checkInput:checked + .checkSpan::after{
            content: "";
            display: inline-block;
            background-color: #6fb3e0;
            height: 12px;
            width: 12px;
            margin: 2px;
        }
    </style>
	<form data-url="${basePath}/${code}/saveJumpToProjectsuccess" method="post" class="form-horizontal" role="form">
		<!-- 表单 -->
		<table class="table table-bordered">
			<tbody>
				<tr>
					<td width="25%">项目编号</td>
					<td width="25%">
						<input type="text" name="contract.pro_id" value="${pro.id}" class="form-control" />
					</td>
					<td width="25%">项目名称</td>
					<td width="25%" colspan="2">
						<input type="text" name="name" value="${pro.name}" class="form-control" />
					</td>
				</tr>
				<tr>
					<td width="25%">申报单位</td>
					<td width="25%">
						<input type="text" name="deptname" value="${dept.fullname}" class="form-control" />
						<input type="hidden" name="contract.dept_id"  value="${dept.id}" class="form-control" />
					</td>
					<td width="25%">项目起止年限</td>

					<td width="12%">
						<input type="text" id="start" name="contract.start"  value="${pro.start}"  class="form-control" />
					</td>
					<td width="13%">
						<input type="text" id="over" name="contract.over"  value="${pro.over}"  class="form-control" />
					</td>
				</tr>
				<tr>
					<td>付款方式</td>
					<td colspan="4">
						<input type="text" name="contract.payment"  placeholder="付款方式" class="form-control" />
					</td>
				</tr>
				<tr>
					<td width="25%">合同签订时间</td>
					<td width="25%">
						<input type="text" id="sign_date" name="contract.sign_date"  placeholder="合同签订时间" class="form-control" />
					</td>
					<td width="25%">质保时间</td>
					<td width="25%" colspan="2">
						<input type="text" id="warranty" name="contract.warranty"  placeholder="质保时间" class="form-control" />
					</td>
				</tr>
				<tr>
					<td width="25%">合同金额</td>
					<td width="25%">
						<input type="text" name="contract.money"  placeholder="合同金额" class="form-control" />
					</td>
					<td width="25%">计划完成时间</td>
					<td width="25%" colspan="2">
						<input type="text" id="plancomptime" name="contract.plan_date"  placeholder="计划完成时间" class="form-control" />
					</td>
				</tr>
				<tr>
					<td>附件上传</td>
					<td colspan="4">
                        <div class="uploadWrapper">
                            <label for="upload" class="selectFile">
                                选择文件<input id="upload" style="display: none;" name="uploadfile" type="file" multiple="true" />
                                <input type="hidden" name="projects.annex" id="uploadfiles"  class="form-control" />
                            </label>
                            <span style="font-size: 14px;">提示：每个文件大小不超过10Mb，支持格式为*、*、*</span>
                            <ul style="list-style: none;width: 60%;" class="fileList">
                                <!--<li class="fileItem">
                                    <span>XXXX.doc</span>
                                    <span>0.15MB</span>
                                    <span class="status">上传成功</span>
                                    <span class="delBtn">删除</span>
                                </li>-->
                            </ul>
                        </div>
						<input type="text" name="contract.annex"  placeholder="附件上传" class="form-control" />
					</td>
				</tr>
				<tr>
					<td>供应商</td>
					<td colspan="4">
						@for(s in supp){
                        <!--<div class="main_child">
							<div class="child1">
                            </div>
                            <div class="child2">
                            </div>
                        </div>-->
                        <label for="${s.id}" class="checkStyle">
                            <input class="checkInput" style="display: none;" id="${s.id}" type="checkbox" name="select">
                            <span class="checkSpan"></span>${s.name}
                        </label>
                        <!--<label for="${s.id}">
                            <input type="checkbox" id="${s.id}" name="select" value="${s.id}" /> ${s.name}
                        </label>-->
						@}
						<div style="margin-top: 10px;">
                            <a style="font-size: 12px;padding: 2px 10px;" class="btn btn-info" href="/suppliers/add">增加供应商</a>
                        </div>
						<!--<input type="text" name="contract.suppliers_ids"  placeholder="供应商" class="form-control" />-->
					</td>
				</tr>
				<tr>
					<td width="25%">联系人</td>
					<td width="25%">
						<input type="text" name="contract.contact"  placeholder="合同金额" class="form-control" />
					</td>
					<td width="25%">联系方式</td>
					<td width="25%" colspan="2">
						<input type="text" name="contract.tel"  placeholder="联系方式" class="form-control" />
					</td>
				</tr>
			</tbody>
		</table>
        <input type="hidden" id="pagezb" value="contract">
		<!-- 按钮 -->
		@ include("/common/_curd/_btn.html", {btn_save:"新增"}) {}
	</form>
<script src="${basePath}/static/laydate/laydate.js"></script>

<script type="text/javascript">
    laydate({
        elem: '#sign_date',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
        //festival: true, //显示节日
        choose: function(datas){ //选择日期完毕的回调
            /*   alert('得到：'+datas); */
        }
    });
    laydate({
        elem: '#start',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
        //festival: true, //显示节日
        choose: function(datas){ //选择日期完毕的回调
            /*   alert('得到：'+datas); */
        }
    });
    laydate({
        elem: '#over',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
        //festival: true, //显示节日
        choose: function(datas){ //选择日期完毕的回调
            /*   alert('得到：'+datas); */
        }
    });
</script>
<script type="text/javascript">
    laydate({
        elem: '#warranty',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
        //festival: true, //显示节日
        choose: function(datas){ //选择日期完毕的回调
            /*   alert('得到：'+datas); */
        }
    });
</script><script type="text/javascript">
    laydate({
        elem: '#plancomptime',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月日
        //festival: true, //显示节日
        choose: function(datas){ //选择日期完毕的回调
            /*   alert('得到：'+datas); */
        }
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        var upload = new UploadFile();
        upload.init();
        function UploadFile() {
            this.fileArr = [];
            this.uploadInput = $("#upload");
            this.fileList = $(".fileList");
            // 初始化
            this.init = function () {
                var _this = this
                this.uploadInput.change(function () {
                    if(this.value){
                        this.files.length && _this.selectFile.call(_this,this.files);// 此处可以对文件个数作限制，默认不限制
                        this.value = "";
                    }
                });
            }
        }

        /**
         * 文件选择并缓存文件信息
         * fileArr  所选文件数组
         */
        UploadFile.prototype.selectFile = function (fileArr){
            var _this = this;
            [].slice.call(fileArr).forEach(function (val,index) {
                (function (i) {
                    var file = fileArr.item(i);
                    _this.fileArr.push(file);
                    _this.renderFile.call(_this,file,i);
                })(index);
            });
            this.delFile.call(this);

        }

        /**
         * 文件信息预览
         * file  文件
         */
        UploadFile.prototype.renderFile = function (file,index) {
            var htmlStr = "",
                maxSize = 10,// 支持文件最大10MB
                fileSize = file.size,// 文件大小
                filename = file.name,// 文件名字
                fileType = filename.split('.').pop();// 文件大小
            if(fileType){// 此处是文件类型，可以作对应的限制，例如 fileType==="png"
                if(fileSize <= maxSize*1024*1024){// 文件大小限制
                    var size = (fileSize/1024/1024).toFixed(2);
                    htmlStr = "<li class='fileItem'><span>"+filename+"</span><span>"+size+"MB</span><span class='status'>未上传</span><span class='delBtn'>删除</span></li>";
                    this.fileList.append(htmlStr);
                    this.uploadEvent.call(this,file,index);
                    index===0&&this.fileList.show();
                }
            }
        }

        // 对所选文件进行删除(上传前)
        UploadFile.prototype.delFile = function () {
            var _this = this;
            $(".fileItem > .delBtn").on("click",function () {
                $(this).parents(".fileItem").remove();
                _this.fileArr.splice($(this).parents(".fileItem").index(),1);console.log(_this.fileArr);
            });
        }

        /**
         * 文件上传
         *  file   文件
         *  index  文件在缓存文件数组中的索引
         */
        UploadFile.prototype.uploadEvent = function (file,index) {
            var _this = this;
            if(file){
                var formdata = new FormData();
                formdata.append("file",file);
                $.ajax({
                    url:"${basePath}/myproject/view",
                    type:"POST",
                    data:formdata,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if(res['flag'] === true ) {
                            if(index === _this.fileArr.length-1){// 所有文件上传完成
                                _this.fileArr = [];// 清空文件缓存数组
                                $("#uploadfiles").val(res.names);// 缓存文件名字
                            }
                            $(".fileItem > .status").text("上传成功");
                            $(".fileItem > .status").css("color","#449d44");
                        }
                    }
                });
            }
        }
    });
</script>
@}
